<template>
    <div class="bolg-preview">
        <Card :bordered="false" dis-hover class="blog-preview-card">
            <div class="img-contain">
            <div class="img-text">
                <tags :tags="tags" class="blog-preview-tag" :type="'default'"></tags>
                <div class="preview-detail">
                    <img src="../assets/preview/topic.png">
                    <h4>{{topic}}</h4>
                    <img src="../assets/preview/view.png">
                    <h4>{{watched}}</h4>
                    <img src="../assets/preview/content.png">
                    <h4>{{content}}</h4>
                    <img src="../assets/preview/storage.png">
                    <h4>{{storage}}</h4>
                    <img src="../assets/preview/author.png">
                    <h4>{{author}}</h4>
                </div>
            </div>
            <div class="imgs">
                <img class="img" style="width: 281px;
        height: 121px;" :src="url"/>
            </div>
            </div><router-link :to="{name:'detail',params:{id:detailID}}">
            <label class="blog-preview-title">{{title}}</label>
            <h4 style="color:#ff6600;text-align: right;padding-right: 20px;font-size: 18px">￥{{price}}</h4>
        </router-link>
        </Card>
    </div>
</template>

<script>
    import tags from "@/component/tags"
    export default {

        name: "blogPreview",
        props:{
          url:String,
          title:String,
          watched:String,
          detailurl:String,
          tags:Array,
            price:String,
          author:String,
            content:String,
            storage:String,
            detailID:String,
            topic:String,
        },
        components:{
          tags
        },
        data(){
            return{
                isShow:false,
            }
        },
        computed:{
        },
        methods:{
        }
    }
</script>

<style scoped>

    .blog-preview-card >>> .ivu-card-body{
        padding: 10px;
        background-color: #f8f8f8;
    }
    .bolg-preview{
        position: relative;
        text-align: left;
        width: 306px;
        height: 169px;
    }
    .img-contain:hover .img-text{
        display: block;
    }
    .img-text{
        margin-left: 1.5px;
        color: white;
        width: 281px;
        height: 121px;
        position: absolute;
        background-color: #000000;
        z-index: 202;
        opacity: 0.8;
        display: none;
    }
    .blog-preview-tag >>> .tag-default{
        background-color: black;
        border: none;
    }
    .blog-preview-tag >>> .tag-lable{
        color: white;
    }
    .imgs{
        position: relative;
        z-index: 201;
        cursor: pointer;
    }
    .img{
        border:solid 1px rgba(0, 0, 0, 0.82);
        clip:rect(0 20px 50px 10px);
    }
    .blog-preview-title{
        cursor: pointer;
        font-size: 16px;
        color: #5f5c5c;
        font-weight: bold;
    }
    .blog-preview-title:hover{
        color: rgb(2, 114, 197);
    }
    .preview-detail{
        float: right;
        margin-top:50px;
        display: table;
    }
    .preview-detail h4{
        display: table-cell;
        vertical-align: middle;
        text-align: center;
        padding-right: 5px;
    }
</style>